// 绩效管理中心-用户中心
import React,{ useRef } from "react";
import { Divider,Input,Form,Space,Button } from 'antd';
import Image from "next/image";
// import { GetServerSideProps } from 'next';
// import { getMenuList } from "@/common/menu/getMenuList";
import {DataTable} from "./components/DataTable"
// import {SearchForm} from "@/components/SearchForm"
import style from "./index.module.css";
import IconGuzhang from "@/public/svg/icon-guzhang.svg";
import IconWord from "@/public/svg/icon-word.svg";
import { useStore } from "./useStore";
import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
import Router from "next/router";
const personalCenter = ()=>{
	const [setQueryForm] = useStore((state) => [
    state.setQueryForm,
  ]); // 从仓库取出数据
  const [form] = Form.useForm();
	// const queryForm = useRef<HTMLFormElement | null>(null)
	// const search = () => {
  //   const formVal = queryForm.current?.getValues() || {}
  //   setQueryForm(formVal)
  // }
  // const reset = () => {
  //   setQueryForm({})
  // }
  
  const onSearchHandler = () => {
    console.log('Search');
  };
  const onResetHandler = () => {
    form.resetFields();
    console.log('Reset');
  };
  // 查询条件 信息
	const formList =[
    {
			name:'orderNo',
			label:'单据编号',
			content:<Input placeholder="请输入单据编号" />
		},
  ]
  return(
    <div className="card content-box bg-slate-100 flex flex-wrap justify-around content-around">
      <div className={`${style.backgroundOne} w-[73%] h-[38%]`}>
        <div className={style.firstWindowTopText}>
          <Image className={style.welcomeIcon} src={IconGuzhang} alt="#"/>
          <h3 className={style.welcomeH3}>欢迎回来，xxxx</h3>
          <div className={style.userInfo}>
            <span>工号：1234</span>
            <span className="pl-[20px]">所属部门：研发部门</span>
          </div>
        </div>
        <Divider className={style.divider}/>
        <div className={style.firstWindowBottom}>
          <div className={style.operateItem}>
            <div className={style.operateItemImage}></div>
            <div className={style.operateItemRight}>
                <span>个人信息</span>
                <div>
                  <a onClick={()=>{
                    Router.push('/performanceManagement/personInfo')
                  }}>去修改</a>
                </div>
            </div>
          </div>
          <div className={style.operateItem}>
            <div className={style.operateItemImage}></div>
            <div className={style.operateItemRight}>
                <span>我的申请</span>
                <div>
                  <span style={{fontSize:'22px',fontWeight:'600'}}>389</span>
                  <span>个</span>
                </div>
            </div>
          </div>
          <div className={style.operateItem}>
            <div className={style.operateItemImage}></div>
            <div className={style.operateItemRight}>
                <span>待我审批</span>
                <div>
                  <span style={{fontSize:'22px',fontWeight:'600'}}>3289</span>
                  <span>个</span>
                </div>
            </div>
          </div>
          <div className={style.operateItem}>
            <div className={style.operateItemImage}></div>
            <div className={style.operateItemRight}>
                <span>我已审批</span>
                <div>
                  <span style={{fontSize:'22px',fontWeight:'600'}}>6529</span>
                  <span>个</span>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div className={'w-[25%] h-[38%] bg-white'}>
        <div className={style.noticeTop}>
          <span>公告</span>
          <a>查看更多</a>
        </div>
        <div className={style.noticeItem}>
          <Image className={style.noticeItemIcon} src={IconWord} alt="#"/>
          <div className={style.noticeItemDetail}>
            <span className={style.noticeItemContent} title="绩效管理中心上线了操作手册说明">绩效管理中心上线了操作手册说明</span>
            <span className={style.noticeItemDate}>2024-07-15</span>
          </div>
        </div>
        <div className={style.noticeItem}>
          <Image className={style.noticeItemIcon} src={IconWord} alt="#"/>
          <div className={style.noticeItemDetail}>
            <span className={style.noticeItemContent} title="绩效管理中心上线了操作手册说明">绩效管理中心上线了操作手册说明</span>
            <span className={style.noticeItemDate}>2024-07-15</span>
          </div>
        </div>
        <div className={style.noticeItem}>
          <Image className={style.noticeItemIcon} src={IconWord} alt="#"/>
          <div className={style.noticeItemDetail}>
            <span className={style.noticeItemContent} title="绩效管理中心上线了操作手册说明">绩效管理中心上线了操作手册说明</span>
            <span className={style.noticeItemDate}>2024-07-15</span>
          </div>
        </div>
      </div>
      <div className={`${style.todoWindow} w-[73%] h-[58%] bg-white`}>
        <p className={style.todoTitle}>待办事项</p>
        {/* 查询条件 form表单 */}
        <Form
          form={form}
          layout={'inline'}
          autoComplete="off"
        >
          <Form.Item name="orderNo" label={'单据编号'} >
            <Input placeholder="请输入单据编号" />
          </Form.Item>
          <Form.Item className={'search-form-button !flex-1 text-right'}>
            <Space>
              <Button type="primary" icon={<SearchOutlined />} onClick={onSearchHandler}>
                查询
              </Button>
              <Button icon={<ReloadOutlined />} onClick={onResetHandler}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
        {/* <SearchForm ref={queryForm} formList={formList} search={search} reset={reset}></SearchForm> */}
        {/* 表格 */}
        <DataTable/>
      </div>
      <div className={'w-[25%] h-[58%] bg-white'}>
        <div className={style.noticeTop}>
          <span>个人考核情况</span>
          <a>查看更多</a>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusWaiting} ${style.status}`}>待审核</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusGoing} ${style.status}`}>审核中</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusFinish} ${style.status}`}>已完成</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusWaiting} ${style.status}`}>待审核</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusGoing} ${style.status}`}>审核中</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusFinish} ${style.status}`}>已完成</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusWaiting} ${style.status}`}>待审核</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusGoing} ${style.status}`}>审核中</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
        <div className={style.examineItem}>
          <div className={`${style.statusFinish} ${style.status}`}>已完成</div>
          <span className={style.examineContent} title="关于2024个人员工绩效考核情况">关于2024个人员工绩效考核情况</span>
          <span className={style.examineDate}>2024-07-15</span>
        </div>
      </div>
    </div>
  )
}
export default personalCenter;

// export const getServerSideProps: GetServerSideProps = async (ctx) => {
//   const data = await getMenuList(ctx);
//   return { props: data };
// };